<template>
  <div class="AI">
    <van-nav-bar
      title="小安助手"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />

    <div class="chat-messages" ref="chatMessagesContainer">
      <div v-for="(message, index) in xixi" :key="index" class="message-con">
        <div class="message" :class="message.fromSelf ? 'sended' : 'received'">
          <div class="message-content">
            <p v-html="message.message"></p>
          </div>
        </div>
      </div>
      <div v-html="msssg" class="msssg"></div>
    </div>
    <div class="bottom">
      <input type="text" v-model="context" />
      <button @click="send">发送</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import axios from "axios";
import { ref } from "vue";
import { io } from "socket.io-client";
const socket = io("http://localhost:4000");
socket.on("connect", () => {
  console.log("socket connected");
  console.log(socket.id);
});
const xixi = ref([{  }]);
const context = ref("");
const msg = ref<string[]>([]);
const msssg = ref("");
const msg1 = ref("");
const send = async () => {
  xixi.value.push({ fromSelf: true, message: context.value });
  const keywordsForImage = ["图片", "照片", "图", "截图"];
  const keywordsForText = ["什么", "谁", "如何", "为什么", "哪里"];
  const foundKeywordsForImage = keywordsForImage.some((keyword) =>
    context.value.includes(keyword)
  );
  const foundKeywordsForText = keywordsForText.some((keyword) =>
    context.value.includes(keyword)
  );
  if (foundKeywordsForImage) {
    const res = await axios.post("http://localhost:3000/resolveImage", {
      prompt: context.value,
    });
    console.log(res);

  } else if (foundKeywordsForText) {
    const res = await axios.get("http://localhost:3000/resolveQuestion", {
      params: {
        context: context.value,
      },
    });
    console.log(res.request);
    socket.emit("send", context.value);
  } else {
    const res = await axios.get("http://localhost:3000/resolveQuestion", {
      params: {
        context: context.value,
      },
    });
    console.log(res.request);
    socket.emit("send", context.value);
  }
  context.value = "";
};
socket.on("result", (data: string) => {
  msssg.value += formatMessage(data);
  console.log(msssg.value);
  console.log(data);
  msg.value!.push(data);
  console.log(msg.value);
});
// 格式化消息，将换行符替换为 <br>
function formatMessage(content: string): string {
  return content.replace(/\n/g, "<br>");
}

const onClickLeft = () => history.back();
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.AI {
  background-color: rgb(236, 239, 247);
  width: 100%;
  height: 100%;
}
.bottom {
  width: 100%;
  height: 50px;
  border: 1px solid black;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: white;
}

.bottom input {
  width: 300px;
  height: 100%;
}

.bottom button {
  width: 70px;
  height: 100%;
  border: none;
  background-color: rgb(134, 234, 144);
}
.container {
  display: flex;
  overflow-wrap: break-word;
}

.result {
  width: 100px;
  float: left;
  justify-content: flex-end;
  max-width: 200px;
  background-color: rosybrown;
}
.wen {
  float: right;
  max-width: 50px;
}
.chat-messages {
  border-radius: 50px 50px 0 0;
  margin: auto;
  background-color: white;
  height: calc(100vh - 120px);
  overflow: hidden;
  margin-top: 5px;
  overflow: scroll;
}
.message-con {
  margin: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}
.message-con .message {
  display: flex;
  align-items: center;
}
.message .message-content {
  max-width: 50%;
  overflow-wrap: break-word;
  padding: 3px;
  font-size: 1rem;
  border-radius: 1rem;
  color: #d1d1d1;
}
.sended {
  justify-content: flex-end;
}
.sended .message-content {
  background-color: rgb(134, 234, 144);
  color: black;
  text-align: center;
  line-height: 40px;
  border-radius: 10px;
}
.received .message-content {
  background-color: rgb(231, 231, 231);
  color: black;
}
.received {
  justify-content: flex-start;
}
</style>
